<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="//at.alicdn.com/t/c/font_3803015_c6ew9x8jvwc.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
		<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
		<style>
			.swiper {
			    width: 800px;
			    height: 400px;
			} 
			 .swiper img{
				 width: 100%;height: 100%;
			 }
			 .icon {
			     width: 1em; height: 1em;
			     vertical-align: -0.15em;
			     fill: currentColor;
			     overflow: hidden;
				 font-size: 50px;
			     }
		</style>
	</head>
	<body>
		
		<div class="swiper">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
					<img src="img/44f84f6bc3dae5a316ad7754aaee5ef0.jpeg" alt="">
				</div>
		        <div class="swiper-slide">
					<img src="img/853756bd3a7262e6c56bfac4437ad33d.jpeg" alt="">
				</div>
		        <div class="swiper-slide">
					<img src="img/a79f2cf4076e738b5f8115e8532df935.jpeg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/ac5994145be96a3cebd88a2c83235edd.jpeg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/e4350a9be27e7df2fecde70c3e701567.jpeg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/f8bd74b15f2c7def9b90b006b6030ef0.jpeg" alt="">
				</div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
			<svg class="icon swiper-button-next" aria-hidden="true">
			    <use xlink:href="#icon-youjiantou_huaban"></use>
			</svg>
		   <svg class="icon swiper-button-prev" aria-hidden="true">
		       <use xlink:href="#icon-zuojiantou_huaban"></use>
		   </svg>
		    
		    <!-- 如果需要滚动条 -->
		    <div class="swiper-scrollbar"></div>
		</div>
		<script>        
		  var mySwiper = new Swiper ('.swiper', {
			effect: 'fade',
		    direction: 'horizontal', // 垂直切换选项
		    loop: true, // 循环模式选项
		    
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		    },
		    
		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
		    
		    // 如果需要滚动条
		    scrollbar: {
		      el: '.swiper-scrollbar',
		    },
			autoplay: {
			    delay: 1000,
			    stopOnLastSlide: false,
			    disableOnInteraction: true,
			},
		})
		  </script>
	</body>
</html>
